<template>
  <div class="help-manual">
    <div
      v-if="mode === 'label_link'"
      class="label_link"
    >
      <span :class="`label ${xvueTheme}`">{{ $demoi18n('panel.helpManual') }}</span>
      <span class="content">
        <a
          :href="helpManualUrl"
          target="_blank"
          rel="noopener noreferrer"
        >{{ $demoi18n('panel.helpManual') }}</a>
      </span>
    </div>
    <div
      v-if="mode === 'single_link'"
      class="single_link"
    >
      <a
        :href="helpManualUrl"
        target="_blank"
        rel="noopener noreferrer"
      >
        <slot>{{ $demoi18n('help-manual.instructionsForUse') }}</slot>
      </a>
    </div>
  </div>
</template>
<script>
import { getLang } from '@/utils/lang.js';
import { getHelpManualBaseUrl } from '@/components/common/help-manual/help-manual-util.js';

export default {
  components: {},
  props: {
    link: String, // 帮助手册对应页面左侧导航链接key
    mode: {
      type: String,
      default: 'label_link', // label_link: 基本信息里面主链接; single_link: 单个按钮;
    },
  },
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
    };
  },
  computed: {
    helpManualUrl() {
      const baseUrl = getHelpManualBaseUrl();

      const { link } = this;
      let lang = getLang() || 'zh-CN';
      lang = lang.replace(/_/g, '-');
      let queryStr = `lang=${lang}`;
      if (link) {
        queryStr += `&link=${link}`;
      }

      const manualUrl = `${baseUrl}/index_iframe.html?${queryStr}`;
      return manualUrl;
    },
  },
  watch: {},
  methods: {
  },
};
</script>
<style lang="less" scoped>
.help-manual {
  .label_link {
    height: 38px;
    line-height: 38px;
    display: flex;
    padding-left: 12px;
    .label {
      font-size: 14px;
      min-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &.dark {
        color: #83b0ca;
      }
    }
    .content {
      margin-left: 12px;
      a {
        color: #8bc34a;
        text-decoration: underline;
      }
    }
  }
  .single_link {
    a {
      color: #8bc34a;
      text-decoration: underline;
    }
  }
}
</style>
